<template>
    <div class="todo-footer" v-show="total">
        <label>
            <!-- <input type="checkbox" :checked="isAll" @change="checkAll" v-model="checked" /> -->
            <input type="checkbox" v-model="isAll" />

        </label>
        <span>
            <span>已完成{{ doneTotal }}</span> / 全部{{ total }}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
export default {
    name: 'MyFooter',
    props: ['todos'],
    data() {
        return {
            checked: ''
        }
    },
    computed: {
        // 直接当做普通属性调用不加括号
        // 任何data中数据变化立即重新计算
        // 计算属性会缓存
        total() {
            return this.todos.length
        },
        doneTotal() {
            // let i = 0;
            // this.todos.forEach(todo => {
            //     if (todo.done == true) {
            //         i++
            //     }
            // });
            // return i;
            const x = this.todos.reduce((prev, current) => {
                return prev + (current.done ? 1 : 0)
            }, 0)
            return x
        },

        // isAll() {
        //     if (this.todos.length == 0) {
        //         return false
        //     }
        //     return this.doneTotal == this.todos.length
        // }
        isAll: {
            get() {
                if (this.todos.length == 0) {
                    return false
                }
                return this.doneTotal == this.todos.length
            },
            set(val) {
                console.log(val);
                this.$bus.$emit('checkAllTodo', val)
            }
        }

    },
    methods: {
        // checkAll() {
        //     console.log(this.checked);
        //     this.checkAllTodo(this.checked)
        // }
        clearAll() {
            if (confirm('确认全部删除嘛？')) {
                this.$bus.$emit('clearAllTodo')
            }
        }
    }
}
</script>

<style scoped>
/*footer*/
.todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
}

.todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}

.todo-footer button {
    float: right;
    margin-top: 5px;
}
</style>